<template>
  <div class="table">
		<table border="0" style="width: 100%;border-collapse:collapse">
		  <tr style="background-color:#D9D9D9;border-collapse:collapse">
		    <th><label>id</label></th>
		    <th style="padding-left: 10px;"><label>音乐标题</label></th>
			<th><label>歌手</label></th>
			<th><label>专辑</label></th>
			<th><label>时长</label></th>
		  </tr>
		  <tr :class="{'table-content-tr':true,'back':(index % 2) == 0}" v-for="(item,index) in tablelist" :key="index" @click="clicktr(item)">
		    <td style="display: flex;align-items: center;justify-content:space-around;"><span>{{index+1}}</span> <span @click="item.t = false" v-if="item.t" style="font-size: 18px;color: red;cursor: pointer;"><i class="iconfont icon-xin1"></i></span><span @click="item.t = true" v-else style="font-size: 18px;cursor: pointer;"><i class="iconfont icon-xin"></i></span></td>
		    <td style="padding-left: 10px;">{{ item.name}}</td>
			<td>{{ item.ar[0].name }}</td>
			<td>{{ item.al.name }}</td>
			<td style="width: 60px;">{{ item.dt | somgtime}}</td>
		  </tr>
		</table>
  </div>
</template>
<script>
export default{
	props:{
		tablelist:{
			type: Array
		}
	},
  data () {
    return {
		like:true
    }
  },
  components: {

  },
  methods: {
	  
	clicktr(data){
		this.$emit('clicktr',data);
	}
  },
  filters: {
  	somgtime(e) {
		const dt = new Date(e)
		const mm = (dt.getMinutes() + '').padStart(2, '0')
		const ss = (dt.getSeconds() + '').padStart(2, '0')
  		return mm + ':' + ss;
  	}
  }
}
</script>

<style scoped="scoped">
	.table{
		width: 100%;
		font-size: 13px;
	}
	.table label{
		display: flex;
		justify-content: end;
	}
	.table table th{
		color: #999999;
		padding: 10px 0;
		margin: 0;
	}
	.table table td{
		color: #000000;
		padding: 5px 0;
	}
	.table table .table-content-tr{
		cursor: pointer;
		padding: 10px 0;
	}
	.table table .table-content-tr tr{
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow:ellipsis;
	}
	.back{
		background-color: #E9E9E9;
	}
	.table table .table-content-tr:hover{
		background-color: #D9D9D9;
	}
</style>
